<!-- 插值表达式渲染各类表达式的示例 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.导入Vue源码 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 2.准备待渲染容器 -->
    <div id="app">
        <!-- <1> 渲染变量 -->
        <h1>{{ title }}</h1>

        <!-- <2> 渲染对象属性名 -->
        <p>大家好，我的名字叫{{ user.name }},今年{{ user.age }}岁了！</p>
        
        <!-- <3> 三元表达式/算数运算 -->
        <p>明年就{{ user.age + 1}}岁了，{{ (user.age + 1) >= 18 ? "已成年" : "未成年"}}</p>

        <!-- <4> 函数/方法的调用  -->
        <p>函数返回值为：{{ fn() }},标题由{{ title.split(" ").length }}个单词组成</p>

        <!-- <5> 字面量 -->
        <p>渲染字面量示例：{{ 2008 }}</p>

    </div>
    <!-- 3.创建应用并声明数据 -->
    <script>
        Vue.createApp({
            setup() {
                const title = "Hello Vue"
                const user = {
                    name: "vue",
                    age: 9
                }
                const fn = () => {
                    return "To do best of one's ability"
                }
                return {
                    title,
                    user,
                    fn
                }
            }
        }).mount("#app")
    </script>
</body>

</html>
